
<html>
<head>
    <title>投票</title>
    <script src="/plugins/pace-0.7.5/pace.js"></script>
    <link href="/plugins/pace-0.7.5/themes/black/pace-theme-center-circle.css" rel="stylesheet" />
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/style/bootstrap/css/bootstrap.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="/css/AdminLTE.min.css">
    <link rel="stylesheet" href="/plugins/animate/animate.css">
    <!-- AdminLTE Skins. Choose a skin from the css/skins
         folder instead of downloading all of them to reduce the load. -->
    <link rel="stylesheet" href="/css/skins/my_all-skins.css">
    <!-- MyAdminLTE.css -->
    <link rel="stylesheet" href="/css/MyAdminLTE.css">
    <!-- Lobibox -->
    <link rel="stylesheet" href="/plugins/lobibox/css/lobibox.min.css">


</head>
<body >
<div id="app" class="container projects">


    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true" class="glyphicon glyphicon-remove input-test"></span>
                    </button>
                    <h5 class="modal-title" id="myModalLabel">提示</h5>
                </div>
                <div class="modal-body">
                    <h5></h5>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>







    <div class="row">
        <span v-if="sings==null"><h1>投票暂时还未开启</h1></span>
        <span v-else>
    <div class="col-sm-6 col-md-4 col-lg-3 " v-for="el in sings" :id="el.id">
        <div class="thumbnail">
            <div class="caption">
                <h1 style=" text-align:center">{{el.id}}号</h1>
                <h3 style=" text-align:center">{{el.singname}}</h3>
                <a class="btn btn-primary btn-block" v-on:click="zhichi(el)">支持他</a>
            </div>
        </div>

    </div>
        </span>
    </div>
</div>



<!-- jQuery 2.2.3 -->
<script src="/plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="/js/bootstrap.js">
<!--vue-->
<script src="/plugins/vue/vue.js"></script>
<!-- SlimScroll -->
<script src="/plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="/plugins/fastclick/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="/js/app.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="/js/demo.js"></script>
<script src="/plugins/echarts/echarts.min.js"></script>
<script src="/plugins/lobibox/js/lobibox.min.js"></script>
<script src="/js/common.js"></script>
<script>
    $(function() {

        getAllsing();
    });
    var vm=new Vue({
        el:"#app",
        data:{
            sings:{}
        },
        methods:{
            getAllsing:function () {
                getAllsing();
            },
            zhichi:function (info) {
                zhichi(info);
            },
            resultFn:function (reslut) {
                if (reslut==1){
                    $("#myModal .modal-content .modal-body>h5").text("投票成功！");
                    $('#myModal').modal();
                }else if(reslut==2){
                    $("#myModal .modal-content .modal-body>h5").text("你已经投过票了！");
                    $("#myModal .modal-content .modal-footer>a").css("display","none");
                    $('#myModal').modal();
                }else{
                    $("#myModal .modal-content .modal-body>h5").text("投票异常！请联系服务");
                    $('#myModal').modal();
                }
            }
        }
    })
    //查询全部选手信息
    function  getAllsing() {
        $.post("/battle/selectAllSingsForBattle", function(result){
            result=eval(result);
            vm.sings = result;
        });

    }

    //点击投票
    function zhichi(info) {
        ajaxSubmit("/toupiao/toupiaoInsert",JSON.stringify(info),resultFn);
    }
    function resultFn(reslut) {
        if (reslut==1){
            $("#myModal .modal-content .modal-body>h5").text("投票成功！");
            $('#myModal').modal();
        }else if(reslut==2){
            $("#myModal .modal-content .modal-body>h5").text("你已经投过票了！");
            $("#myModal .modal-content .modal-footer>a").css("display","none");
            $('#myModal').modal();
        }else{
            $("#myModal .modal-content .modal-body>h5").text("投票异常！请联系服务");
            $('#myModal').modal();
        }

    }
</script>
</body>
</html>
